<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      /* body{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width:100vw;
      overflow: hidden;
    } */
      svg {
        border: 2px solid black;
      }
    </style>
  </head>

  <body>
    <svg width="1350" height="794" viewBox="0 0 1350 794" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path id="path2" d="M299 496C352.295 398.008 499.047 235.222 659.698 368.011C820.349 500.8 999.504 403.342 1069 338.014" stroke="black" stroke-width="4" />

      <g id="plane" transform="translate(-100,-100)">
        <path
          d="M78.6211 144.578C78.6211 146.605 80.2617 148.246 82.2891 148.246L86.4258 148.246C88.4492 148.246 90.0898 146.605 90.0898 144.578C90.0898 142.555 88.4492 140.914 86.4258 140.914L82.2891 140.914C80.2617 140.914 78.6211 142.553 78.6211 144.578ZM89.5801 166.572C89.5801 168.596 91.2207 170.236 93.2441 170.236L97.5801 170.236C99.6035 170.236 101.244 168.596 101.244 166.572C101.244 164.545 99.6035 162.904 97.5801 162.904L93.2441 162.904C91.2187 162.904 89.5801 164.545 89.5801 166.572ZM78.6211 56.6133C78.6211 58.6406 80.2617 60.2813 82.2891 60.2813L86.4258 60.2813C88.4492 60.2813 90.0898 58.6406 90.0898 56.6133C90.0898 54.5899 88.4492 52.9492 86.4258 52.9492L82.2891 52.9492C80.2617 52.9492 78.6211 54.5879 78.6211 56.6133ZM89.5801 34.6211C89.5801 36.6485 91.2207 38.2891 93.2441 38.2891L97.5801 38.2891C99.6035 38.2891 101.244 36.6485 101.244 34.6211C101.244 32.5977 99.6035 30.957 97.5801 30.957L93.2441 30.957C91.2187 30.957 89.5801 32.5977 89.5801 34.6211Z"
          fill="#CCD1D9"
        />
        <path
          d="M128.867 184.895C128.866 185.867 128.479 186.799 127.791 187.487C127.104 188.175 126.171 188.561 125.199 188.563L110.539 188.563C109.158 188.563 107.894 187.783 107.269 186.555L71.9467 116.914C71.0307 115.109 71.7514 112.904 73.5561 111.988C75.3608 111.072 77.5659 111.795 78.4819 113.598L106.949 115.125C106.539 113.145 107.81 111.203 109.792 110.789C111.773 110.379 113.714 111.65 114.128 113.633L128.789 184.15C128.839 184.396 128.867 184.648 128.867 184.895ZM128.867 16.2969C128.867 16.543 128.839 16.793 128.789 17.043L114.128 87.5586C113.714 89.5391 111.775 90.8125 109.792 90.4023C107.812 89.9883 106.539 88.0488 106.949 86.0664L78.4819 87.5938C77.5659 89.3984 75.3608 90.1191 73.5561 89.2031C71.7495 88.2871 71.0307 86.082 71.9467 84.2734L107.269 14.6348C107.894 13.4024 109.158 12.627 110.539 12.627L125.199 12.627C126.302 12.627 127.345 13.1231 128.042 13.9805C128.575 14.6353 128.866 15.4531 128.867 16.2969Z"
          fill="#E6E9ED"
        />
        <path
          d="M140.251 110.967C139.648 112.172 139.75 113.611 140.523 114.715L155.183 135.684C155.521 136.166 155.971 136.561 156.494 136.833C157.017 137.105 157.597 137.248 158.187 137.248L172.849 137.248C174.031 137.248 175.138 136.68 175.826 135.719C176.165 135.246 176.387 134.698 176.473 134.122C176.559 133.546 176.507 132.958 176.32 132.406L168.988 110.797C168.736 110.054 168.252 109.412 167.608 108.964C166.964 108.517 166.194 108.288 165.41 108.311L143.419 108.951C142.074 108.99 140.855 109.766 140.251 110.967ZM155.183 65.5098L140.523 86.4785C140.144 87.0207 139.919 87.6553 139.871 88.3151C139.823 88.9749 139.955 89.6354 140.251 90.2266C140.548 90.8174 140.999 91.3168 141.557 91.6717C142.115 92.0266 142.759 92.2238 143.419 92.2422L165.41 92.8848C167.019 92.9336 168.47 91.9238 168.988 90.3984L176.32 68.7891C176.449 68.4043 176.513 68.0078 176.513 67.6133C176.513 66.8555 176.279 66.1074 175.826 65.4766C175.138 64.5156 174.029 63.9473 172.849 63.9473L158.187 63.9473C156.992 63.9434 155.869 64.5293 155.183 65.5098Z"
          fill="#4A89DC"
        />
        <path
          d="M176.514 89.7695L176.514 111.76C176.514 113.74 174.941 115.361 172.959 115.422C168.018 115.572 51.8672 119.09 44.5664 119.09C39.9805 119.09 33.8867 117.354 29.043 114.662C22.5098 111.033 18.9121 106.096 18.9121 100.766C18.9121 95.4316 22.5098 90.4941 29.043 86.8672C33.8887 84.1777 39.9824 82.4375 44.5664 82.4375C51.8672 82.4375 168.018 85.9531 172.959 86.1055C174.941 86.1641 176.514 87.7871 176.514 89.7695Z"
          fill="#5D9CEC"
        />
        <path
          d="M43.2695 90.0042C42.8457 90.1644 41.3496 90.8206 39.9277 92.5081C38.7012 93.9691 37.2344 96.5863 37.2344 100.764C37.2344 107.457 41.0273 110.674 43.2695 111.524C45.1641 112.239 47.2793 111.282 47.9941 109.389C48.1543 108.963 48.2324 108.526 48.2324 108.096C48.2324 106.668 47.3926 105.321 46.0156 104.727C45.791 104.598 44.5664 103.758 44.5664 100.764C44.5664 97.7679 45.791 96.928 46.0156 96.7991C47.8066 96.0277 48.6895 93.9769 47.9941 92.1351C47.2773 90.2445 45.1621 89.2894 43.2695 90.0042Z"
          fill="#F5F7FA"
        />
        <path
          d="M180.178 100.764C180.178 102.787 178.537 104.428 176.514 104.428L150.857 104.428C148.834 104.428 147.189 102.787 147.189 100.764C147.189 98.7402 148.832 97.0957 150.857 97.0957L176.514 97.0957C178.537 97.0977 180.178 98.7402 180.178 100.764Z"
          fill="#4A89DC"
        />
      </g>
      <animateMotion href="#plane" dur="2s" repeatCount="indefinite" rotate="50">
        <mpath href="#path2" />
      </animateMotion>
    </svg>

    <svg width="774" height="181" viewBox="0 0 774 181" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path id="movePath" d="M2 180C55.2946 82.0084 202.047 -80.7778 362.698 52.0109C523.349 184.8 702.504 87.3415 772 22.0139" stroke="black" stroke-width="4" />
      <circle r="30" fill="red" id="myCircle"></circle>
      <animateMotion href="#myCircle" dur="2s" repeatCount="indefinite">
        <mpath href="#movePath" />
      </animateMotion>
    </svg>
  </body>
</html>
